<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload=function(){
			var oTab=document.getElementById('tab1');
			var oTxt=document.getElementById('name');
			var oBtn=document.getElementById('btn1');
			oBtn.onclick=function (){
		for(var i=0;i<oTab.tBodies[0].rows.length;i++){
			var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
			var sTxt=oTxt.value.toLowerCase();
		 // if(oTab.tBodies[0].rows[i].cells[1].innerHTML==oTxt.value){
		 var arr=sTxt.split('');
		 oTab.tBodies[0].rows[i].style.display='none';
		// oTab.tBodies[0].rows[i].style.background='';
		 for(var j=0;j<arr.length;j++){
		 if(sTab.search(arr[j])!=-1){
   	  // oTab.tBodies[0].rows[i].style.background='yellow';
   	   oTab.tBodies[0].rows[i].style.display='block';
               }
			}
			}
			}
		}
	</script>
</head>
<body>
	 姓名:<input id="name" type="text">
    <input id="btn1" type="button" value="搜索">
		<table id="tab1" border="1" width="500">
	<thead>
		<td>ID</td>
		<td>姓名</td>
		<td>年龄</td>
		<td>操作</td>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Blue</td>
			<td>28</td>
			<td></td>
		</tr>
		<tr>
			<td>2</td>
			<td>张三</td>
			<td>23</td>
			<td></td>
		</tr>
		<tr>
			<td>3</td>
			<td>王五</td>
			<td>22</td>
			<td></td>
		</tr>
		<tr>
			<td>4</td>
			<td>小二</td>
			<td>28</td>
			<td></td>
		</tr>
		<tr>
			<td>5</td>
			<td>许二</td>
			<td>28</td>
			<td></td>
		</tr>
		<tr>
			<td>6</td>
			<td>张二</td>
			<td>22</td>
			<td></td>
		</tr>
			<tr>
			<td>7</td>
			<td>王二</td>
			<td>22</td>
			<td></td>
		</tr>
			<tr>
			<td>8</td>
			<td>三二</td>
			<td>22</td>
			<td></td>
		</tr>
	</tbody>
</body>
</html>